<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #app{
        width: 400px;
        display: flex;
        justify-content: space-around;
    }
    
    #b1{
        padding: 200px 0;
        width: 50px;
    }
</style>
<body>
    <div id="app">
        <div id="a1">
        <h1><input type="checkbox" v-model="isAllCheck">列表1</h1>
       <div v-for="item in list"><input type="checkbox" v-model="item.checked">
    {{item.name}}
       </div>
    </div>
    <div id="b1">
    <button @click="move">>></button>
    <button @click="move2"><<</button>
</div>
    <div id="a2">
        <h1><input type="checkbox" v-model="isAllCheck2">列表2</h1>
       <div v-for="item in list2"><input type="checkbox" v-model="item.checked2">
    {{item.name}}
       </div>
    </div>

    </div>
</body>
<script src="./vue.js"></script>
<script>
     const {
			createApp,
			ref,
			reactive,
			computed
		} = Vue;
		const app = createApp({
			setup() {
				let list = ref([ 
                { name: '备选项1', checked: false },
                {name: '备选项2', checked: false },
                {name: '备选项3', checked: false },
                {name: '备选项4', checked: false },
                {name: '备选项5', checked: false },
                {name: '备选项6', checked: false },
                {name: '备选项7', checked: false },
                {name: '备选项8', checked: false }
            ]);
                let list2=ref([
                { name: '备选项9', checked: false },
                { name: '备选项10', checked: false },
                { name: '备选项11', checked: false }
                ])
                const isAllCheck = computed({
					
					get(){
							return list.value.every(v=>v.checked)
					},
					set(val){
						if(val){
							list.value.forEach(v=>{
								v.checked = true
							})
						}else{
							list.value.forEach(v=>{
								v.checked = false
							})
						}
						
					}
				})
                const isAllCheck2= computed({
					
					get(){
							return list2.value.every(v=>v.checked)
					},
					set(val){
						if(val){
							list2.value.forEach(v=>{
								v.checked = true
							})
						}else{
							list2.value.forEach(v=>{
								v.checked = false
							})
						}
						
					}
				})
                const move2 = () => {
                const moveitem = list.value.filter(item => item.checked);
            };

            const move = () => {
                const selectedItems = list2.value.filter(item => item.checked);
            };
				return {
					list,
                    isAllCheck,
                    list2,
                    isAllCheck2,
                    move,
                    move2
                  
				}
			}
    }).mount('#app')
</script>
</html>
